<template>
    <div class="character pdTop pdBot" id="character" :class="`character-${deployIndex}`">
        <h2 class="pdBot">{{$t('home.character.title')}}</h2>
        <b-container>
            <b-row>
                <b-col xl="3" lg="3" md="3" sm="12">
                    <b-row>
                        <b-col xl="12" lg="12" md="12" sm="6">
                            <div class="char-item char-0" @mouseover="mouseover(0)" @mouseout="mouseout()">
                                <h3 class="char-title" :class="{'color419':deployIndex==0}">{{$t('home.character.list[0].title')}}</h3>
                                <p class="char-describe">{{$t('home.character.list[0].desc')}}</p>
                            </div>
                        </b-col>
                        <b-col xl="12" lg="12" md="12" sm="6" @mouseover="mouseover(3)" @mouseout="mouseout()">
                            <div class="char-item char-3">
                                <h3 class="char-title" :class="{'color419':deployIndex==3}">{{$t('home.character.list[3].title')}}</h3>
                                <p class="char-describe">{{$t('home.character.list[3].desc')}}</p>
                            </div>
                        </b-col>
                    </b-row>
                </b-col>
                <b-col xl="6" lg="6" md="6" sm="12" class="char-decoration">
                    <div class="yuan char-outer"></div>
                    <div class="yuan char-inner"></div>
                    <div class="yuan char-small"></div>
                    <div class="char-deploy-img"></div>
                </b-col>
                <b-col xl="3" lg="3" md="3" sm="12">
                    <b-row>
                        <b-col xl="12" lg="12" md="12" sm="6">
                            <div class="char-item char-1" @mouseover="mouseover(1)" @mouseout="mouseout()">
                                <h3 class="char-title" :class="{'color419':deployIndex==1}">{{$t('home.character.list[1].title')}}</h3>
                                <p class="char-describe">{{$t('home.character.list[1].desc')}}</p>
                            </div>
                        </b-col>
                        <b-col xl="12" lg="12" md="12" sm="6">
                            <div class="char-item char-2" @mouseover="mouseover(2)" @mouseout="mouseout()">
                                <h3 class="char-title" :class="{'color419':deployIndex==2}">{{$t('home.character.list[2].title')}}</h3>
                                <p class="char-describe">{{$t('home.character.list[2].desc')}}</p>
                            </div>
                        </b-col>
                    </b-row>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
export default {
    name: 'character',
    data(){
        return{
            deployIndex:0,
            Timer: null
        }
    },
    mounted(){
        this.startTimer()
    },
    methods:{
        startTimer(){
            this.Timer = setInterval(() => {
                this.deployIndex++;
                if (this.deployIndex == 4) {
                    this.deployIndex = 0
                }
            }, 4000);
        },
        mouseover(index){
            clearInterval(this.Timer);
            this.deployIndex = index
        },
        mouseout(){
            this.startTimer()
        }
    },
    beforeDestroy() {
        clearInterval(this.Timer);
        this.Timer = null;
    }
}
</script>

<style lang="scss" scoped>
.character{
    overflow: hidden;
    text-align: center;
    background: -webkit-linear-gradient(top,#ffffff,#f2f9ff);
    .char-item{
        transition: all 0.1s ease-out;
        cursor: pointer;
        padding-top:5px;
        h3{
            line-height: 25px;
            color: #666666;
            margin-bottom: 15px;
        }
        &:hover{
            h3{
                color:#4199f7;
            }
        }
        .color419{
            color:#4199f7;
        }
        &.char-0{
            height:300px;
            padding-right: 65px;
            text-align:right;
            background: url(../images/char-icon0.png) right top no-repeat;
            background-size: 36px 36px;
            &:hover{
                background: url(../images/char-hover-icon0.png) right top no-repeat;
                background-size: 36px 36px;
            }
        }
        &.char-1{
            height:300px;
            padding-left: 65px;
            text-align:left;
            background: url(../images/char-icon1.png) left top no-repeat;
            background-size: 36px 36px;
            &:hover{
                background: url(../images/char-hover-icon1.png) left top no-repeat;
                background-size: 36px 36px;
            }
        }
        &.char-2{
            padding-left: 65px;
            text-align:left;
            background: url(../images/char-icon2.png) left top no-repeat;
            background-size: 36px 36px;
            &:hover{
                background: url(../images/char-hover-icon2.png) left top no-repeat;
                background-size: 36px 36px;
            }
        }
        &.char-3{
            padding-right: 65px;
            text-align:right;
            background: url(../images/char-icon3.png) right top no-repeat;
            background-size: 36px 36px;
            &:hover{
                background: url(../images/char-hover-icon3.png) right top no-repeat;
                background-size: 36px 36px;
            }
        }
    }
    .char-decoration{
        position: relative;
        .yuan{
            width: 640px;
            height: 640px;
            background: #e5f4ff;
            position: absolute;
            top: 50%;
            margin-top: -320px;
            left: 50%;
            margin-left: -320px;
            border-radius: 50%;
            -webkit-animation-fill-mode: both;
            -moz-animation-fill-mode: both;
            -ms-animation-fill-mode: both;
            animation-fill-mode: both;
            opacity: 0;
            -webkit-animation: ballScale 4s 0s linear infinite;
            -moz-animation: ballScale 4s 0s linear infinite;
            -ms-animation: ballScale 4s 0s linear infinite;
            animation: ballScale 4s 0s linear infinite;
        }
        .char-outer{
            
        }
        .char-inner{
            animation-delay: 1s;
        }
        .char-small{
            animation-delay: 2s;
        }
        .char-deploy-img{
            width: 100%;
            height: 100%;
            background: url(../images/char-banner1.png) no-repeat center center;
            background-size: 100% auto;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            transition: all 1s ease 0s;
            -webkit-transition: all 1s ease 0s;
            -ms-transition: all 1s ease 0s;
            -moz-transition: all 1s ease 0s;
        }
    }
    &.character-0{
        .char-item{
            &.char-0{
                background: url(../images/char-hover-icon0.png) right top no-repeat;
                background-size: 36px 36px;
            }
        }
        .char-decoration{
            .char-deploy-img{
                background: url(../images/char-banner1.png) no-repeat center center;
                background-size: 100% auto;
            }
        }
    }
    &.character-1{
        .char-item{
            &.char-1{
                background: url(../images/char-hover-icon1.png) left top no-repeat;
                background-size: 36px 36px;
            }
        }
        .char-decoration{
            .char-deploy-img{
                background: url(../images/char-banner2.png) no-repeat center center;
                background-size: 100% auto;
            }
        }
    }
    &.character-2{
        .char-item{
            &.char-2{
                background: url(../images/char-hover-icon2.png) left top no-repeat;
                background-size: 36px 36px;
            }
        }
        .char-decoration{
            .char-deploy-img{
                background: url(../images/char-banner3.png) no-repeat center center;
                background-size: 100% auto;
            }
        }
    }
    &.character-3{
        .char-item{
            &.char-3{
                background: url(../images/char-hover-icon3.png) right top no-repeat;
                background-size: 36px 36px;
            }
        }
        .char-decoration{
            .char-deploy-img{
                background: url(../images/char-banner4.png) no-repeat center center;
                background-size: 100% auto;
            }
        }
    }
}

@keyframes ballScale{
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}
</style>